<template>
	<view class="">
		<view class='margin-bottom-xl'>
			<view class='margin-sm radius bg-white'>
				<view class='padding solid-bottom text-bold text-lg'>
					积分获取规则
				</view>
				<view class="cu-list menu    shadow-lg">
					<view class="cu-item" @click="qiandao">
						<view class="content">
							<view class="flex solid-bottom padding justify-between">
								<text>每日签到送 2-6 个积分</text>
								<button v-if="sign" @click="qiandao" class="cu-btn bg-orange">签到</button>
								<text v-else class="text-green">今日已签到</text>
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<view class="flex solid-bottom padding justify-between">
								<view>
									<view class="text-left">邀请好友奖励 10-15 个积分</view>
									<view class="text-left text-sm">会员邀请好友，好友充值后获取金币收益</view>
								</view>
								<button class="cu-btn bg-gradual-orange" @click="yaoqing">邀请</button>
							</view>
						</view>
					</view>
					<view class="cu-item" @click="navTo('pay')">
						<view class="content">
							<view class="flex solid-bottom padding justify-between">
								<text>充值优惠获取积分</text>
								<button class="cu-btn bg-gradual-orange">充值</button>
							</view>
						</view>
					</view>

				</view>
			</view>
			<!--  -->
			<view class='margin-sm radius bg-white'>
				<view class='padding solid-bottom text-bold text-lg'>
					积分消耗规则
				</view>
				<view class="cu-list menu  padding-bottom margin-bottom shadow-lg">
					<view class="cu-item">
						<view class="content">
							<view class="text-left padding-top">1.查看信息联系方式 -10 积分，重复看的信息不扣除积分。</view>
							<view class="text-left padding-top-xs">2.充值成为会员，会员期间可以无限查看信息。</view>
						</view>
					</view>
				</view>

			</view>
			<view class="bg-white padding-xs margin-sm">
				<view class='padding solid-bottom text-bold text-lg'>
					说明：
				</view>
				<view class="padding-top-xs">
					<view class="text-left">1.会员充值后，查看信息不扣除积分，并且你的下级和下下级充值你都享有有金币收益</view>
					<view class="text-left  padding-top">2.金币积累到一定数量可提现为<text class="text-orange">现金红包</text>。</view>
				</view>

				<view class='margin padding-bottom-xl margin-top-xl'>
					<view class='text-gray'>
						关注公众号司机服务平台，每日推送各大企业招聘信息。
						<text class="text-green copy-btn" @tap="copy" data-clipboard-action="copy" data-clipboard-text="司机服务平台">去关注</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="showModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					公众号复制成功，快去微信-搜索框粘贴吧
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="showModal2?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">邀请好友</view>
					<view class="action" @tap="showModal2 = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{inteHref}}
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button data-clipboard-action="copy" :data-clipboard-text="inteHref" class="copy-btn cu-btn bg-blue margin-left"
						 @tap="copyInter">复制链接</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="showModal3?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="showModal3 = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您的专属链接已复制成功，赶快去邀请好友吧
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Clipboard from 'clipboard'
	export default {
		data() {
			return {
				sign: true,
				userInfo: {
					userID: '',
					invitCode: '',
				},
				showModal: false,
				showModal2: false,
				showModal3: false,
				inteHref: ''
			}
		},
		onLoad(option) {
			this.getUserInfo();
		},

		methods: {
			copyInter() {
				let _this = this;
				let clipboard = new Clipboard(".copy-btn");
				clipboard.on('success', function() {
					_this.showModal = false;
					_this.showModal2 = false;
					_this.showModal3 = true;
					setTimeout(()=>{
						_this.showModal3 = false;
					}, 3000)
				});
				clipboard.on('error', function() {
					_this.showModal2 = false;
					setTimeout(()=>{
						uni.showToast({
							title: '复制失败'
						})
					}, 500);
				});
			},
			copy() {
				let _this = this;
				let clipboard = new Clipboard(".copy-btn");
				clipboard.on('success', function() {
					_this.showModal3 = false;
					_this.showModal = true;
				});
				clipboard.on('error', function() {
					_this.showModal = false;
					setTimeout(()=>{
						uni.showToast({
							title: '复制失败'
						})
					}, 500);
				});
			},
			getUserInfo() {
				let that = this;
				uni.getStorage({
					key: 'ONLINE_USER',
					success: function(res) {
						that.userInfo = res.data
					}
				});
			},
			yaoqing() {
				if (this.userInfo.invitCode == '') {
					uni.showToast({
						title: '登录信息已过期',
						icon: 'none'
					})
					return;
				}
			
				this.showModal2 = true;
				let host = window.location.protocol+"//"+window.location.host;
				let str = host + "/pages/user/inteuser?id=" + this.userInfo.invitCode;
				this.inteHref = '专业的驾驶员招聘平台，每天更新各地区招聘求职信息，点击链接查看详情：' + str;
			},
			qiandao() {
				let _this = this;
				this.baseRequest('api/driver/sign/in', 'GET', {}, function(res, info) {
					_this.sign = true;
				}, function() {
					_this.sign = false;
				});
			},
			navTo(page) {
				uni.navigateTo({
					url: '/pages/user/' + page
				});
			},
		}
	}
</script>